<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong> {{ sum }} </strong></span>
		<ul class="filters">
			<li>
				<a href="javascript:;"
				:class="{selected: type === 'all'}" 
				@click="change('all')"
				>全部</a>
			</li>
			<li>
				<a href="javascript:;"
				:class="{selected: type === 'active'}" 
				@click="change('active')"
				>未完成</a>
			</li>
			<li>
				<a href="javascript:;"
				:class="{selected: type === 'completed'}" 
				@click="change('completed')"
				>已完成</a>
			</li>
		</ul>
		<button class="clear-completed"
		@click="clear"
		>清除已完成</button>
	</footer>
</template>

<script>
	export default {
		props:{
			arr:Array
		},
		data () {
			return {
				type: "all"
			}
		},
		methods: {
			change(type){
				this.type = type
				this.$emit("change", this.type)
			},
			clear(){
				this.$emit("clear")
			}
		},
		computed: {
			sum(){
				return this.arr.filter(item => item.isDone === false).length
			}
		}
	}
</script>
